<template>
  <div style="width: 500px; position: relative; right: -200px;top: 100px;">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>添加接口账号</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content-box">
      <div class="tablebox" style="padding: 20px">
        <el-form label-position="right" label-width="130px" :model="user" ref="editform">
          <el-form-item label="用户名：">
            <el-input v-model="user.client_id" type="text"></el-input>
          </el-form-item>
          <el-form-item label="密码：">
            <el-input v-model="user.client_secret" type="password"></el-input>
          </el-form-item>
        </el-form>
        <el-button style="margin-left: 130px;" size="small" type="primary" @click="save()">确定</el-button>
        <el-button size="small" @click="$router.back()">取消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { api } from "@/fetch/api";


export default {
  name: "useredit",
  data() {
    return {
      user: {
        client_secret: "",
        client_id: "",
        name: "",
        state: 2
      }
    };
  },
  computed: {
    userId() {
      return this.$route.params.id;
    },
    title() {
      return this.$route.params.id ? "编辑" : "添加新接口";
    }
  },
  methods: {
    //jlq-add-20180605-end
    save() {
      if (!this.user.client_id) {
        this.$message.error("用户名不能为空！！！");
        return;
      }

      if (!this.user.client_secret) {
        this.$message.error("密码不能为空！！！");
        return;
      }
      api.AddClient(this.user).then(response => {
        if (response.status === 100) {
          this.$message.success(response.message);
          this.$router.back();
        } else {
          this.$message.error(response.message);
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.pagination {
  margin-top: 20px;
  text-align: center;
}

.uploadbtn {
  line-height: 40px;
  font-size: 14px;
  position: relative;
  color: #666;
  label {
    width: 120px;
    padding: 12px 20px;
    font-size: 14px;
    border: 1px solid #1e89e0;
    background-color: transparent;
    color: #1e89e0;
    margin-right: 20px;
  }
  input {
    position: absolute;
    font-size: 480px;
    top: 22px;
    left: -30px;
    height: 42px;
    width: 150px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    cursor: pointer;
  }
}

.preview-container {
  overflow: hidden;
  color: #999;
  margin-top: 10px;
  height: 200px;
  width: 200px;
}

.avatar {
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 50px;
  border: 1px solid #999;
}

.avatarbtn {
  position: absolute;
  top: 14px;
  left: 80px;
}
</style>
